<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./../template/testPageTemplate.xhtml">

            <ui:define name="content">
                <f:view beforePhase="#{taskBean.init()}">
                    <h:form>
                        <p:commandButton value="Back to Index" action="./../index.xhtml?faces-redirect=true"/>
                    </h:form>
                    <h:form id="form" style="margin-top: 20px">
                        <p:dataTable id="taskTable" var="tItem" value="#{taskBean.tasks}" widgetVar="taskTable" 
                                     emptyMessage="No task found with given criteria" 
                                     rowKey="#{tItem.id}"  selection="#{taskBean.selectedTask}" selectionMode="single">

                            <f:facet name="header">
                                <p:outputPanel>
                                    <p:commandButton value="Add Task" actionListener="#{taskBean.clearValue()}" update=":AddForm" oncomplete = "addTask.show();"/>
                                    &nbsp;
                                    <p:commandButton value="Edit Task" onclick= "editTask.show();"/>
                                    &nbsp;
                                    <p:commandButton value="Delete Task" onclick= "deleteTask.show();"/>
                                </p:outputPanel>
                            </f:facet>
                            <p:ajax event="rowSelect"  update=":Editform, :DeleteForm" listener="#{taskBean.updateValue()}"/>
                            <p:column id="idColumn" filterBy="#{tItem.id}" 
                                      headerText="Index" filterMatchMode="startsWith" style="width: 10%">
                                <h:outputText value="#{tItem.id}" />
                            </p:column>
                            <p:column id="titleColumn" headerText="Title" style="width: 15%">
                                <h:outputText value="#{tItem.title}" />
                            </p:column>
                            <p:column id="DescriptionColumn"  headerText="Instruction" style="width: 75%">
                                <h:outputText value="#{tItem.instruction}"/>
                            </p:column>
                        </p:dataTable>
                    </h:form>
                    <h:form id="AddForm">
                        <p:dialog widgetVar="addTask" width="800px">
                            <p:panelGrid id="panel" columns="2" style="width: 750px">
                                <h:outputText value="Title"/>
                                <h:inputText value="#{taskBean.taskTitle}" style=" width: 650px;"/> 
                                <h:outputText value="Instruction"/>
                                <h:inputTextarea value="#{taskBean.taskInstruction}" style=" width: 650px; height: 300px"/> 
                            </p:panelGrid>

                            <p:commandButton value="Add" style="margin-top: 20px" actionListener="#{taskBean.addTask()}" update=":form" oncomplete="addTask.hide()"/>
                            <p:commandButton value="Cancel" style="margin-top: 20px" onclick="addTask.hide();" />  
                        </p:dialog>
                    </h:form>

                    <h:form  id ="Editform">
                        <p:dialog widgetVar="editTask" width="800px">
                            <p:panelGrid columns="2" style="margin-top: 20px">
                                <h:outputText value="Id"/>
                                <h:outputText value="#{taskBean.taskId}" style=" width: 650px;"/> 
                                <h:outputText value="Title"/>
                                <h:inputText value="#{taskBean.taskTitle}" style=" width: 650px;"/> 
                                <h:outputText value="Instruction"/>
                                <h:inputTextarea value="#{taskBean.taskInstruction}" style=" width: 650px; height: 300px"/> 
                            </p:panelGrid>
                            <p:commandButton value="Save Changes" actionListener="#{taskBean.editTask()}" update=":form" oncomplete="editTask.hide()"/>
                        </p:dialog>
                    </h:form>
                    <h:form id="DeleteForm">
                        <p:dialog widgetVar="deleteTask" width="800px">
                            <h:outputText value="Are you sure you want to delete this Question? "/>
                            <p:panelGrid columns="2" style="margin-top: 20px">
                                <h:outputText value="ID"/>
                                <h:outputText value="#{taskBean.taskId}"/>
                                <h:outputText value="Question"/>
                                <h:outputText value="#{taskBean.taskTitle}"/>
                                <h:outputText value="Description"/>
                                <h:outputText value="#{taskBean.taskInstruction}"/>
                            </p:panelGrid>
                            <p:commandButton value="Delete" style="margin-top: 20px" actionListener="#{taskBean.deleteTask()}" update=":form" oncomplete="deleteTask.hide()"/>
                            <p:commandButton value="Cancel" style="margin-top: 20px" onclick="deleteTask.hide();" />  
                        </p:dialog>
                    </h:form>
                </f:view>
            </ui:define>

        </ui:composition>

    </body>
</html>
